M
MLOG
CSS ஆங்கர் அளவு செயல்பாட்டுக் கணக்கீட்டை விளக்குதல்: ஆங்கர் பரிமாணக் கணக்கீட்டில் துல்லியம் | MLOG | MLOG

மற்றும் அதனுடன் தொடர்புடைய CSS:

            .container {
  position: relative;
  height: 100vh; /* For demonstration */
  display: flex;
  justify-content: center;
  align-items: center;
}

.anchor-button {
  padding: 1rem;
  background-color: lightblue;
  border: none;
  cursor: pointer;
  anchor-name: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  background-color: black;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  width: 150px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  /* Positioning logic using anchor dimensions */
  inset-block-start: calc(anchor(--my-button) bottom + 10px);
}

/* A more advanced example considering viewport edges */
@media (width < 768px) {
  .tooltip {
    /* If the button is too close to the top edge, place tooltip below */
    top: calc(anchor(--my-button) bottom + 10px);
    bottom: auto;
    /* If the button is too close to the bottom edge, place tooltip above */
    @media (height - anchor(--my-button) bottom < 50px) { /* Adjust 50px as needed */
      top: auto;
      bottom: calc(anchor(--my-button) top - 10px);
    }
  }
}

இந்த எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டில், anchor(--my-button) bottom-ஐப் பயன்படுத்தி ஆங்கர் பொத்தானின் அடிப்பகுதியைப் பொறுத்து டூல்டிப்பை நிலைநிறுத்துகிறோம். சிக்கலான வியூபோர்ட் விளிம்பு கண்டறிதலுக்கு ஜாவாஸ்கிரிப்டை உள்ளடக்கிய அல்லது தானியங்கி ஓவர்ஃப்ளோ கையாளுதலுக்கான எதிர்கால CSS அம்சங்களைப் பயன்படுத்தும் மேம்பட்ட தர்க்கம் இதை இன்னும் செம்மைப்படுத்தும். முக்கியமாக நாம் எடுத்துக்கொள்ள வேண்டியது என்னவென்றால், anchor() செயல்பாடு ஆங்கரின் நிலையையும், அதன் மூலம் லேஅவுட் கணக்கீடுகளுக்கு அதன் பரிமாணங்களையும் டைனமிக்காகக் குறிப்பிட அனுமதிக்கிறது.

2. அகலம் அல்லது உயரத்தின் அடிப்படையில் கூறுகளை சீரமைத்தல்

ஒரு கூறு எப்போதும் அதன் ஆங்கரின் அதே அகலத்தை கொண்டிருக்க வேண்டும், அல்லது ஆங்கரின் உயரத்தைப் பொறுத்து ஒரு குறிப்பிட்ட செங்குத்து இடைவெளியைப் பராமரிக்க வேண்டும் என்று நீங்கள் விரும்பலாம்.

ஒரு சைட்பார் முக்கிய உள்ளடக்கப் பகுதியின் உயரத்துடன் பொருந்த வேண்டும் என்ற ஒரு காட்சியைக் கற்பனை செய்து பாருங்கள்.

            .main-content {
  min-height: 400px;
  anchor-name: --main-content;
  /* ... other styles */
}

.sidebar {
  position: sticky;
  top: 0;
  position-anchor: --main-content;
  height: anchor(--main-content height);
  /* ... other styles */
}

இங்கே, height: anchor(--main-content height); நேரடியாக சைட்பாரின் உயரத்தை --main-content என்று பெயரிடப்பட்ட கூறின் உயரத்திற்கு சமமாக அமைக்கிறது. இது சரியான ஒத்திசைவை உறுதி செய்கிறது.

3. ஆங்கர் செய்யப்பட்ட ஸ்க்ரோல் நடத்தை

anchor-scroll பண்பு ஒரு சக்திவாய்ந்த கூடுதலாகும், இது ஆங்கர் செய்யப்பட்ட கூறுகள் அவற்றின் ஆங்கரின் ஸ்க்ரோல் கண்டெய்னரின் ஸ்க்ரோல் நிலைக்கு ஏற்ப செயல்பட அனுமதிக்கிறது. இது ஒத்திசைக்கப்பட்ட ஸ்க்ரோலிங் அனுபவங்கள் அல்லது ஒரு பயனர் ஒரு குறிப்பிட்ட பிரிவின் வழியாக ஸ்க்ரோல் செய்யும்போது தங்களை வெளிப்படுத்தும் டைனமிக் கூறுகளுக்கான சாத்தியங்களைத் திறக்கிறது.

உதாரணமாக, ஒரு குறிப்பிட்ட பிரிவில் பயனர் எவ்வளவு தூரம் ஸ்க்ரோல் செய்துள்ளார் என்பதைப் பொறுத்து அதன் ஒளிபுகுநிலையை அல்லது அளவை சரிசெய்ய வேண்டிய ஒரு ஸ்டிக்கி ஹெடர் உங்களிடம் இருக்கலாம்.

            .scroll-container {
  height: 500px;
  overflow-y: scroll;
  anchor-name: --scroll-area;
}

.sticky-header {
  position: sticky;
  top: 0;
  position-anchor: --scroll-area;
  /* Adjust opacity based on scroll progress */
  opacity: calc(anchor(--scroll-area scroll-progress));
}

இந்த நிலையில், anchor(--scroll-area scroll-progress) --scroll-area-க்குள் ஸ்க்ரோல் முன்னேற்றத்தைக் குறிக்கும் 0 மற்றும் 1-க்கு இடையில் ஒரு மதிப்பை வழங்குகிறது. இந்த மதிப்பை பின்னர் opacity-ஐ அமைப்பது போன்ற கணக்கீடுகளில் பயன்படுத்தலாம்.

குறிப்பிட்ட ஆங்கர் பரிமாணங்களைக் கணக்கிடுதல்: anchor() செயல்பாட்டின் நுணுக்கங்கள்

anchor() செயல்பாடு ஒரு ப்ளேஸ்ஹோல்டரை விட மேலானது; இது ஒரு சக்திவாய்ந்த கணக்கீட்டுக் கருவி. calc() போன்ற CSS செயல்பாடுகளுக்குள் பயன்படுத்தும்போது, இது சிக்கலான பரிமாணம் மற்றும் நிலை சரிசெய்தல்களை அனுமதிக்கிறது.

ஆங்கர் ஆயத்தொலைவுகள் மற்றும் பரிமாணங்களை அணுகுதல்

ஆங்கர் பண்புகளை அணுகுவதற்கான பொதுவான தொடரியல்:

            anchor(anchor-name 
  [ top | left | bottom | right | 
    x | y | 
    center-x | center-y | 
    width | height | 
    corner(x, y) | 
    block-start | block-end | 
    inline-start | inline-end | 
    scroll-progress 
  ]
)

சில முக்கிய பரிமாணம்-தொடர்புடைய அணுகல்களைப் பிரித்துப் பார்ப்போம்:

calc()-இல் பரிமாணங்களைப் பயன்படுத்துதல்

calc()-க்குள் இந்த மதிப்புகளைப் பயன்படுத்தும் திறனில்தான் இந்த மாயாஜாலம் நிகழ்கிறது. உங்கள் ஆங்கர் செய்யப்பட்ட கூறைத் துல்லியமாக நிலைநிறுத்த அல்லது அளவிட நீங்கள் எண்கணித செயல்பாடுகளைச் செய்யலாம்.

உதாரணம்: ஒரு கூறை மற்றொரு கூறுடன் ஒப்பிட்டு மையப்படுத்துதல்.

நேரடி மையப்படுத்தலை ஃபிளெக்ஸ்பாக்ஸ் அல்லது கிரிட் மூலம் அடைய முடியும் என்றாலும், ஆங்கர் பொசிஷனிங் மிகவும் சிக்கலான, தொடர்ச்சியற்ற லேஅவுட்களில் பயனுள்ளதாக இருக்கும்.

            .anchored-element {
  position: absolute;
  position-anchor: --some-anchor;
  /* Position its left edge at the center of the anchor's left edge */
  left: calc(anchor(--some-anchor left) + anchor(--some-anchor width) / 2);
  /* Position its top edge at the center of the anchor's top edge */
  top: calc(anchor(--some-anchor top) + anchor(--some-anchor height) / 2);
  /* Now, to truly center, you'd need to offset by half of its own width/height */
  /* This often requires knowing the anchored element's dimensions or using transforms */
  transform: translate(-50%, -50%);
}

உதாரணம்: ஒரு ஆங்கரின் பரிமாணத்தைப் பொறுத்து ஒரு நிலையான இடைவெளியைப் பராமரித்தல்.

ஒரு மோடல் தோன்ற வேண்டும் என்றும், அதன் கீழ் விளிம்பு எப்போதும் அதன் ஆங்கர் கூறின் கீழ் விளிம்பிலிருந்து 50px மேலே இருக்க வேண்டும் என்றும் வைத்துக்கொள்வோம், ஆங்கரின் உயரத்தைப் பொருட்படுத்தாமல்.

            .modal {
  position: absolute;
  position-anchor: --trigger-element;
  bottom: calc(anchor(--trigger-element height) + 50px);
  /* ... other modal styles */
}

ஆங்கர் கூறின் உயரம் மாறும்போது, மோடலின் `bottom` பண்பு ஆங்கரின் கீழ் விளிம்பிற்கு மேலே 50px இடைவெளியைப் பராமரிக்க அதற்கேற்ப சரிசெய்கிறது என்பதை இந்தக் கணக்கீடு உறுதி செய்கிறது.

உலகளாவிய பரிசீலனைகள் மற்றும் சர்வதேசமயமாக்கல்

உலகளாவிய பார்வையாளர்களுக்காக வலைப் பயன்பாடுகளை உருவாக்கும்போது, துல்லியமான மற்றும் நெகிழ்வான லேஅவுட் கணக்கீடுகள் இன்னும் முக்கியமானவை. ஆங்கர் பொசிஷனிங் API, அதன் பரிமாணக் கணக்கீட்டுத் திறன்களுடன், இயல்பாகவே சர்வதேசமயமாக்கலை ஆதரிக்கிறது:

உலாவி ஆதரவு மற்றும் எதிர்கால மேம்பாடுகள்

CSS ஆங்கர் பொசிஷனிங் API ஒப்பீட்டளவில் ஒரு புதிய அம்சமாகும், மேலும் உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது. அதன் நிலையான வெளியீட்டின்படி, குரோம் மற்றும் எட்ஜ் போன்ற முக்கிய உலாவிகள் ஆதரவைச் செயல்படுத்தியுள்ளன. இருப்பினும், உலாவி இணக்கத்தன்மை குறித்த புதுப்பித்த தகவல்களுக்கு சமீபத்திய caniuse.com தரவைச் சரிபார்ப்பது எப்போதும் முக்கியம்.

எதிர்கால மேம்பாடுகள் ஆங்கர் பொசிஷனிங்கின் திறன்களை விரிவுபடுத்தும் என்று எதிர்பார்க்கப்படுகிறது, இதில் ஆங்கர் பரிமாணங்களைக் கணக்கிடுவதற்கும், ஓவர்ஃப்ளோ காட்சிகளைத் தானாக நிர்வகிப்பதற்கும் மேலும் அதிநவீன வழிகள் அடங்கும். டெவலப்பர்கள் இந்த அம்சங்களை டெவலப்மெண்ட் சூழல்களில் பரிசோதனை செய்து, உலாவி விற்பனையாளர்கள் மற்றும் CSS பணிக்குழுவிற்கு கருத்துக்களை வழங்குமாறு ஊக்குவிக்கப்படுகிறார்கள்.

ஆங்கர் அளவு செயல்பாட்டுக் கணக்கீட்டிற்கான சிறந்த நடைமுறைகள்

ஆங்கர் அளவு செயல்பாட்டுக் கணக்கீடுகளை திறம்படப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

  1. தெளிவான ஆங்கர் உறவுகளுடன் தொடங்கவும்: உங்கள் anchor-name மற்றும் position-anchor பண்புகள் சரியாகப் பயன்படுத்தப்பட்டுள்ளதா என்பதையும், நோக்கம் கொண்ட ஆங்கர் உறவுகள் நிறுவப்பட்டுள்ளதா என்பதையும் உறுதிப்படுத்தவும்.
  2. செманடிக் HTML-ஐப் பயன்படுத்தவும்: உங்கள் HTML-ஐ செமான்டிக்காக கட்டமைக்கவும். இது அணுகல்தன்மை மற்றும் SEO-ஐ மேம்படுத்துவதோடு மட்டுமல்லாமல், அர்த்தமுள்ள கூறுகளுக்கு anchor-name-ஐ அடையாளம் கண்டு ஒதுக்குவதையும் எளிதாக்குகிறது.
  3. செயல்திறனுக்கு முன்னுரிமை அளிக்கவும்: ஆங்கர் பொசிஷனிங் செயல்திறன் மிக்கதாக வடிவமைக்கப்பட்டிருந்தாலும், செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும் அதிகப்படியான சிக்கலான, உள்ளமைக்கப்பட்ட கணக்கீடுகளைத் தவிர்க்கவும். உங்கள் லேஅவுட்களை பல்வேறு நிலைமைகளின் கீழ் சோதிக்கவும்.
  4. அழகான சீரழிவு: ஆங்கர் பொசிஷனிங்கை ஆதரிக்காத உலாவிகளுக்கு, பின்னடைவு லேஅவுட்களை வழங்கவும் அல்லது அத்தியாவசிய உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதை உறுதி செய்யவும். இதை மீடியா வினவல்கள் மற்றும் அம்சம் வினவல்கள் (எ.கா., @supports) மூலம் அடையலாம்.
  5. உங்கள் ஆங்கர்களை ஆவணப்படுத்தவும்: பெரிய திட்டங்களில், எந்தக் கூறுகள் ஆங்கர்களாகச் செயல்படுகின்றன, அவற்றின் நோக்கம் என்ன என்பதைத் தெளிவாக ஆவணப்படுத்தவும். இது மற்ற டெவலப்பர்கள் லேஅவுட் கட்டமைப்பைப் புரிந்துகொள்ள உதவுகிறது.
  6. calc()-ஐ புத்திசாலித்தனமாகப் பயன்படுத்தவும்: துல்லியமான சரிசெய்தல்களுக்கு calc()-ஐப் பயன்படுத்தவும், ஆனால் தேவையற்ற முறையில் கணக்கீடுகளைச் சிக்கலாக்க வேண்டாம். சில நேரங்களில் எளிமையான CSS பண்புகள் ஒத்த முடிவுகளை அடைய முடியும்.
  7. சாதனங்கள் மற்றும் வியூபோர்ட்களில் சோதிக்கவும்: உங்கள் ஆங்கர் செய்யப்பட்ட லேஅவுட்களை எப்போதும் பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் சோதித்து, சீரான நடத்தை மற்றும் தோற்றத்தை உறுதிப்படுத்தவும்.
  8. அணுகல்தன்மையைக் கருத்தில் கொள்ளவும்: ஆங்கர் செய்யப்பட்ட கூறுகளின் நிலை மற்றும் நடத்தை அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும். உதாரணமாக, டூல்டிப்கள் நிராகரிக்கக்கூடியதாக இருக்க வேண்டும், மற்றும் ஃபோகஸ் மேலாண்மை சரியான முறையில் கையாளப்பட வேண்டும்.

முடிவுரை

CSS ஆங்கர் பொசிஷனிங் API, குறிப்பாக ஆங்கர் பரிமாணங்களைக் கணக்கிட்டுப் பயன்படுத்தும் அதன் திறன், நவீன வலை மேம்பாட்டிற்கு ஒரு புரட்சிகரமான அம்சமாகும். பரிமாணக் கணக்கீட்டிற்கு anchor() செயல்பாட்டை எவ்வாறு பயன்படுத்துவது என்பதைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் அதிக துல்லியத்துடனும், ஜாவாஸ்கிரிப்டைச் சார்ந்திருப்பது குறைவாகவும், மேலும் அதிநவீன, டைனமிக் மற்றும் ரெஸ்பான்சிவ் பயனர் இடைமுகங்களை உருவாக்க முடியும். உலாவி ஆதரவு முதிர்ச்சியடையும்போது, ஆங்கர் பரிமாணக் கணக்கீட்டில் தேர்ச்சி பெறுவது, அடுத்த தலைமுறை ஊடாடும் மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலை அனுபவங்களை உருவாக்குவதற்கு ஒரு அத்தியாவசியத் திறமையாக மாறும். வலை லேஅவுட் மற்றும் வடிவமைப்பில் சாத்தியமானவற்றின் எல்லைகளைத் தள்ள இந்த புதிய கருவிகளைத் தழுவிக்கொள்ளுங்கள்.